﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>纯CSS3马儿奔跑动画特效 - 站长素材</title>

    <link href="css/style.css" rel="stylesheet">

</head>
<body>

<input id="toggle" type="checkbox">
<label for="toggle">

    <div class="floor"></div>

    <div class="🐴 animate">
        <div class="front-leg right">
            <div class="shoulder">
                <div class="upper">
                    <div class="knee">
                        <div class="lower">
                            <div class="ankle">
                                <div class="foot">
                                    <div class="hoof"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="back-leg right">
            <div class="top">
                <div class="thigh">
                    <div class="lower-leg">
                        <div class="foot">
                            <div class="hoof"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="tail">
            <div class="nub">
                <div class="section">
                    <div class="section">
                        <div class="section">
                            <div class="section">
                                <div class="section">
                                    <div class="section last">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="body">
            <div class="section">
                <div class="section">
                    <div class="section">
                        <div class="section">
                            <div class="section last">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="back-side"></div>
        </div>

        <div class="neck">
            <div class="under"></div>
            <div class="front"></div>
            <div class="base"></div>
            <div class="top"></div>
            <div class="shoulder"></div>
        </div>
        <div class="front-leg left">
            <div class="shoulder">
                <div class="upper">
                    <div class="knee">
                        <div class="lower">
                            <div class="ankle">
                                <div class="foot">
                                    <div class="hoof"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="back-leg left">
            <div class="top">
                <div class="thigh">
                    <div class="lower-leg">
                        <div class="foot">
                            <div class="hoof"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="head">
            <div class="skull"></div>
            <div class="nose"></div>
            <div class="face"></div>
            <div class="lip"></div>
            <div class="jaw"></div>
            <div class="chin"></div>
            <div class="ear"></div>
            <div class="eye"></div>
        </div>
    </div>

    <div class="dust front">
        <div class="particle"></div>
        <div class="particle"></div>
        <div class="particle"></div>
        <div class="particle"></div>
        <div class="particle"></div>
        <div class="particle"></div>
        <div class="particle"></div>
        <div class="particle"></div>
        <div class="particle"></div>
        <div class="particle"></div>
        <div class="particle"></div>
        <div class="particle"></div>
        <div class="particle"></div>
        <div class="particle"></div>
        <div class="particle"></div>
        <div class="particle"></div>
        <div class="particle"></div>
        <div class="particle"></div>
        <div class="particle"></div>
        <div class="particle"></div>
        <div class="particle"></div>
        <div class="particle"></div>
        <div class="particle"></div>
        <div class="particle"></div>
        <div class="particle"></div>
        <div class="particle"></div>
        <div class="particle"></div>
        <div class="particle"></div>
        <div class="particle"></div>
        <div class="particle"></div>
    </div>
    <div class="dust back">
        <div class="particle"></div>
        <div class="particle"></div>
        <div class="particle"></div>
        <div class="particle"></div>
        <div class="particle"></div>
        <div class="particle"></div>
        <div class="particle"></div>
        <div class="particle"></div>
        <div class="particle"></div>
        <div class="particle"></div>
        <div class="particle"></div>
        <div class="particle"></div>
        <div class="particle"></div>
        <div class="particle"></div>
        <div class="particle"></div>
        <div class="particle"></div>
        <div class="particle"></div>
        <div class="particle"></div>
        <div class="particle"></div>
        <div class="particle"></div>
        <div class="particle"></div>
        <div class="particle"></div>
        <div class="particle"></div>
        <div class="particle"></div>
        <div class="particle"></div>
        <div class="particle"></div>
        <div class="particle"></div>
        <div class="particle"></div>
        <div class="particle"></div>
        <div class="particle"></div>
    </div>
</label>

</body>
</html>